<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑品牌</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{__STATIC__}/layuiAdmin/layui/css/layui.css" rel="stylesheet">
    <link href="{__STATIC__}/layuiAdmin/adminui/dist/css/admin.css" rel="stylesheet">
    <link href="{__STATIC__}/layuiAdmin/style/style.css" rel="stylesheet">
    <style>
        html {background: #fff;padding-top: 20px;}
    </style>
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label"><span>*</span> 名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="m_title" lay-verify="required" placeholder="请输入名称" value="{$data.title}" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span>*</span> 图片：</label>
            <div class="layui-input-inline">
                <input type="text" id="m_pic" name="m_pic" lay-verify="required" placeholder="请上传图片" value="{$data->getData('pic')}" class="layui-input">
            </div>
            <div class="layui-btn-group">
                <button type="button" class="layui-btn layui-btn-info" id="btn_upload" style="padding-left: 10px;padding-right: 10px;">
                    <i class="layui-icon">&#xe681;</i>上传
                </button>
                <button type="button" class="layui-btn layui-btn-info" id="btn_preview" style="padding-left: 10px;padding-right: 10px;">
                    <i class="layui-icon">&#xe615;</i>预览
                </button>
            </div>
            <div style="float: left;width: 100%;color:#999;padding-left: 137px;box-sizing: border-box;padding-top: 6px;">图片比例为2:1，如：400*200。</div>
            <span style="display:none;" id="pic"><img id="yl_pic" src="{$data.pic}"></span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span>*</span> 首字母：</label>
            <div class="layui-input-inline w180">
                <select name="m_letter" lay-verify="required">
                    <option value="">请选择首字母</option>
                    <option value="A" {eq name="$data.letter" value="A"}selected{/eq}>A</option>
                    <option value="B" {eq name="$data.letter" value="B"}selected{/eq}>B</option>
                    <option value="C" {eq name="$data.letter" value="C"}selected{/eq}>C</option>
                    <option value="D" {eq name="$data.letter" value="D"}selected{/eq}>D</option>
                    <option value="E" {eq name="$data.letter" value="E"}selected{/eq}>E</option>
                    <option value="F" {eq name="$data.letter" value="F"}selected{/eq}>F</option>
                    <option value="G" {eq name="$data.letter" value="G"}selected{/eq}>G</option>
                    <option value="H" {eq name="$data.letter" value="H"}selected{/eq}>H</option>
                    <option value="I" {eq name="$data.letter" value="I"}selected{/eq}>I</option>
                    <option value="J" {eq name="$data.letter" value="J"}selected{/eq}>J</option>
                    <option value="K" {eq name="$data.letter" value="K"}selected{/eq}>K</option>
                    <option value="L" {eq name="$data.letter" value="L"}selected{/eq}>L</option>
                    <option value="M" {eq name="$data.letter" value="M"}selected{/eq}>M</option>
                    <option value="N" {eq name="$data.letter" value="N"}selected{/eq}>N</option>
                    <option value="O" {eq name="$data.letter" value="O"}selected{/eq}>O</option>
                    <option value="P" {eq name="$data.letter" value="P"}selected{/eq}>P</option>
                    <option value="Q" {eq name="$data.letter" value="Q"}selected{/eq}>Q</option>
                    <option value="R" {eq name="$data.letter" value="R"}selected{/eq}>R</option>
                    <option value="S" {eq name="$data.letter" value="S"}selected{/eq}>S</option>
                    <option value="T" {eq name="$data.letter" value="T"}selected{/eq}>T</option>
                    <option value="U" {eq name="$data.letter" value="U"}selected{/eq}>U</option>
                    <option value="V" {eq name="$data.letter" value="V"}selected{/eq}>V</option>
                    <option value="W" {eq name="$data.letter" value="W"}selected{/eq}>W</option>
                    <option value="X" {eq name="$data.letter" value="X"}selected{/eq}>X</option>
                    <option value="Y" {eq name="$data.letter" value="Y"}selected{/eq}>Y</option>
                    <option value="Z" {eq name="$data.letter" value="Z"}selected{/eq}>Z</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述：</label>
            <div class="layui-input-block">
                <textarea name="m_info" placeholder="请输入描述" class="layui-textarea">{$data.info}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span>*</span> 排序：</label>
            <div class="layui-input-inline w80">
                <input type="number" name="m_px" lay-verify="number" value="{$data.sequence}" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">越大越靠前</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否推荐：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="m_top" value="1" lay-text="是|否" {eq name="$data.is_top" value="1"}checked{/eq} lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="m_show" value="1" lay-text="是|否" {eq name="$data.is_show" value="1"}checked{/eq} lay-skin="switch">
            </div>
        </div>
        <input type="hidden" name="m_id" value="{$data.id}">
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="LAY-submit" id="LAY-submit" value="确认">
        </div>
    </div>
</body>
</html>
<script src="{__STATIC__}/layuiAdmin/layui/layui.js"></script>
<script>
    layui.use(function (){
        let $ = layui.$;
        let upload = layui.upload;

        //上传
        upload.render({
            elem: '#btn_upload'
            ,url: "{:url('upload/index')}"
            ,data: {dir: 'brand'}
            ,accept: 'images'
            ,before: function () {
                layer.load();
            }
            ,done: function(res){
                layer.closeAll();
                if(res.code == 0) {
                    $('#m_pic').val(res.data.file);
                    $('#yl_pic').attr('src',res.data.src);
                }
                else {
                    layer.msg(res.msg);
                }
            }
            ,error: function(){
                layer.closeAll();
                layer.msg('请求异常');
            }
        });
        //预览
        $('#btn_preview').click(function () {
            layer.open({
                type: 1,
                shade: false,
                title: false,
                content: $('#pic')
            });
        });
    });
</script>